<template>
	<el-dropdown trigger="click" @command="onSelectDropdown">
		<el-button type="primary" :size="size">
			<div class="flex-between-center">
				<div class="search-bar-item-size1" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;">
					<span>{{ getName(value) }}</span>
				</div>

				<i class="el-icon-arrow-down el-icon--right"></i>
			</div>
		</el-button>
		<el-dropdown-menu slot="dropdown" :append-to-body="false">
			<el-dropdown-item
				v-for="item in optionList"
				:key="item.id"
				:label="item.name"
				:command="item.id"
				class="flex-start-center"
				style="white-space: nowrap;"
			>
				<div style="width: 20px;height: 100%;" :class="value ? value === item.id ? 'el-icon-check item-gap' : 'item-gap' : ''"></div>
				<div>{{ item.name }}</div>
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>
<script>
    export default {
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: [String, Number],
                default: null
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            size: {
                type: String,
                default: 'small'
            }
        },
        data() {
            return {};
        },
        methods: {
            onSelectDropdown(e) {
                this.$emit('change', e);
            },
            getName(id) {
                const item = this.optionList.find(x => x.id === id);
                return item && item.name ? item.name : '暂无';
            }
        }
    };
</script>
